<template>
  <div class="container flex-box">
    <div class="main-content pb-10 flex-box">
      <div class="card-box box-shadow mb-10">
        <div class="card-header flex-box">
          <div class="card-title">{{ dataForm.carCode }} 整车Audit等级-日趋势</div>
          <div class="ml-20">
            <el-date-picker
                v-model="dataForm.fbDate"
                type="month"
                placeholder="选择日期"
                format="yyyy 年 MM 月"
                size="small"
                value-format="yyyy-MM"
                @change="getAuditChart">
            </el-date-picker>
          </div>
        </div>
        <div class="card-body">
          <chart class="chart" :options="setOption" autoresize></chart>
        </div>
      </div>
      <div class="card-box-bottom mt-10">
        <div class="card-box-left">
          <div class="card-box box-shadow">
            <div class="card-header">
              <div class="card-title">{{ dataForm.carCode }} 整车Audit等级-问题分类</div>
            </div>
            <div class="card-body pb-20">
              <chart class="chart" :options="pieOption" autoresize ref="pieChart"></chart>
            </div>
          </div>
        </div>
        <div class="card-box-right">
          <div class="card-box box-shadow">
            <div class="card-header">
              <div class="card-title">{{ dataForm.carCode }} 整车Audit等级-问题进展</div>
            </div>
            <div class="card-body pb-20 myScroll">
              <Table :tableData="tableData"></Table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Table from "@/components/table"
import mixinViewModule from '@/mixins/view-module'
import { auditInfoChart } from "@/api/analysis"
export default {
  mixins: [mixinViewModule],
  components: {Table},
  data () {
    return {
      dataForm: {
        fbDate: '',
        carCode: ''
      },
      setOption: {},
      pieOption: {},
      tableData: []
    }
  },
  mounted() {
    let date = new Date();
    let year = date.getFullYear();
    let month = date.getMonth() + 1;
    if (month.toString().length == 1) {
      month = '0' + month
    }
    let toMonth = year + '-' + month ;
    this.dataForm.fbDate = toMonth
    this.dataForm.carCode = window.localStorage.getItem('carCode')
    this.getAuditChart()
    this.getPieChart()
  },
  methods: {
    getAuditChart () {
      auditInfoChart(this.dataForm).then(res => {
        console.log(res)
        console.log(res.equivalentList[1].dataList)
        this.setOption = {
          color: ['#DAE0F2', '#88BAFF', '#66A0ED', '#2CC0C5', '#2CC95D', '#0091FF', '#FAA302'],
          legend: {
            data: ['冲压等效个数', '焊装等效个数', '涂装等效个数', '总装等效个数', '外协等效个数','实际值','日目标值'],
            right: 10
          },
          grid: {
            left: 50,
            right: 35,
            bottom: 30
          },
          xAxis: {
            ...this.chartXAxis,
            data: res.xNameList
          },
          yAxis: [
            {
              type: 'value',
              ...this.chartYAxis
            }, {
              type: 'value',
              axisLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              splitLine: {
                show: false
              }
            }
          ],
          series: [{
            name: res.equivalentList[0].name,
            type: 'bar',
            data: res.equivalentList[0].dataList,
            stack: '总量',
            barWidth: 25,
            label: {
              show: true,
              position: 'inside'
            }
          }, {
            name: res.equivalentList[1].name,
            type: 'bar',
            data: res.equivalentList[1].dataList,
            stack: '总量',
            label: {
              show: true,
              position: 'inside'
            }
          }, {
            name: res.equivalentList[2].name,
            type: 'bar',
            data: res.equivalentList[2].dataList,
            stack: '总量',
            label: {
              show: true,
              position: 'inside'
            }
          }, {
            name: res.equivalentList[3].name,
            type: 'bar',
            data: res.equivalentList[3].dataList,
            stack: '总量',
            label: {
              show: true,
              position: 'inside'
            }
          }, {
            name: res.equivalentList[4].name,
            type: 'bar',
            stack: '总量',
            label: {
              show: true,
              position: 'inside'
            },
            data: res.equivalentList[4].dataList
          }, {
            name: '实际值',
            type: 'line',
            yAxisIndex: 1,
            label: {
              show: true,
              position: 'top'
            },
            data: res.actualList
          }, {
            name: '日目标值',
            type: 'line',
            symbol: 'none',
            yAxisIndex: 1,
            data: res.targetList
          }]
        }
      })

    },
    getTable () {
      // this.$store.dispatch('table').then((response) => {
      //   console.log(response)
      // }).catch((error) => {
      //   console.log(error)
      // })
    },
    getPieChart () {
      this.$refs.pieChart.refresh()
      this.pieOption = {
        color: ['#99C1FF', '#4985DB'],
        legend: {
          icon: 'circle',
          itemWidth: 10,
          itemHeight: 10,
          data: ['B类项', 'C类项'],
          bottom: 5
        },
        series: [
            {
          name: '问题分类',
          type: 'pie',
          startAngle: 65,
          radius: [0, '75%'],
          center: ['50%', '43%'],
          label: {
            show: true,
            position: 'inside'
          },
          data: [
            { value: 24, name: 'B类项' },
            { value: 105, name: 'C类项' }
          ]
        },
          {
          name: '问题分类',
          type: 'pie',
          startAngle: 65,
          radius: [0, '75%'],
          center: ['50%', '43%'],
          data: [
            { value: 24, name: 'B类' },
            { value: 105, name: 'C类' }
          ],
          label: {
            // formatter: '{c}项,{d}%',
            // 保留整数
            formatter:function(data){
              console.log("data",data)
              return    data.value +"项"+","+""+data.percent.toFixed(0)+"%";
            },
            color: 'rgba(0, 0, 0, 0.5)',
          },
          labelLine: {
            lineStyle: {
              color: '#CFD1D3',
              type: 'dotted'
            }
          }
        }]
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import "../../styles/analysis";
.card-box-bottom {
  display: flex;
  flex: 1;
}
.card-box-left {
  flex: 1;
  margin-right: 10px;
}
.card-box-right {
  //flex: 2;
  width: calc(100% - 550px);
  margin-left: 10px;
}
.myScroll {
  position:relative;
  overflow:auto;
  height:80%
}

</style>
